<template>
  <div class="zoom-boxs">
    <div class="zoom-icon-wrapper">
      <div class="zoom-icon-plus" @click="zoomIn">+</div>
      <div class="zoom-icon-minus" @click="zoomOut">-</div>
    </div>
    <div class="map-boxs"><div id="map"></div></div>
  </div>
</template>
<!-- 平移PAN 注记MARKER 点POINT 线段LINE
  多线段POLYLINE 圆CIRCLE 矩形RECT 多边形POLYGON 涂抹DRAWMASK 解除CLEARMASK  -->
<script>
import AILabel from "ailabel"

export default {
  name: "zoom",
  props: {
    imgUrl: {
      default: "",
    },
    gMapX: {
      // x的坐标
      default: "",
    },
    gMapY: {
      // y的坐标
      default: "",
    },
    mode: {
      default: "",
    },
    pointId: {
      default: "",
    },
    markerImgs: {
      default: "",
    },
    deleteState: {
      default: "",
    },
    polylinesList: {
      default: [],
    },
    startPointList: {
      default: [],
    },
    endPointList: {
      default: [],
    },
  },
  data() {
    return {
      drawingStyle: {},
      itemName: "",
      gMap: null, //AILabel实例
      gFirstFeatureLayer: null, //矢量图层实例(矩形，多边形等矢量)
      allFeatures: [], //所有features
    }
  },
  watch: {
    // 当前工具类型监听
    mode: {
      handler(mode) {
        console.log("当前mode", mode)
        if (this.gMap) {
          this.$nextTick(() => {
            this.gMap.refresh() // 刷新map
            this.gMap.setMode(mode)
            this.setDrawingStyle(mode)
          })
        }
      },
      deep: true,
      immediate: true,
    },
    // 图片监听
    imgUrl: {
      handler(imgUrl) {
        console.log("图片最新的url", imgUrl)
        if (this.gMap) {
          this.gMap.destroy()
        }
        this.$nextTick(() => {
          this.getAilabel() // 加载ailabel
        })
      },
      deep: true,
      immediate: true,
    },
    // 删除路线监听
    deleteState: {
      handler(deleteState) {
        if (deleteState > 0) {
          this.deleteRouteInfo() // 删除绘绘制路线数据
        }
      },
      deep: true,
      immediate: true,
    },
    // 线集合监听
    polylinesList: {
      handler(newVal) {
        this.$nextTick(() => {
          //刷新map
          if (this.gMap) {
            this.gMap.refresh()
            if (newVal.length > 0) {
              this.initDrawLines() // 加载路线
            }
          }
        })
      },
      deep: true,
      immediate: true,
    },
    // 起点图标监听
    startPointList: {
      handler(newVal) {
        this.$nextTick(() => {
          //刷新map
          if (this.gMap) {
            this.gMap.refresh()
            if (newVal.length > 0) {
              this.initDrawStartPoint() // 加载起点
            }
          }
        })
      },
      deep: true,
      immediate: true,
    },
    // 终点图标监听
    endPointList: {
      handler(newVal) {
        this.$nextTick(() => {
          //刷新map
          if (this.gMap) {
            this.gMap.refresh()
            if (newVal.length > 0) {
              this.initDrawendPoint() // 加载起点
            }
          }
        })
      },
      deep: true,
      immediate: true,
    },
    // 点X坐标监听
    gMapX: {
      handler(newVal) {
        if (newVal > 0) {
          this.gMapX = newVal
          let gMapList = {
            pointX: this.gMapX,
            pointY: this.gMapY,
            pointZ: "",
          }
          this.$emit("gMapList", gMapList)
          this.$nextTick(() => {
            //刷新map
            this.gMap.refresh()
            this.initDrawPoint() // 加载点位图
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    // 刷新ailabel
    refreshAilabel() {
      this.gMap.refresh() // 刷新map
    },
    // 删除绘绘制路线数据
    deleteRouteInfo() {
      this.gFirstFeatureLayer.removeFeatureById("POLYLINE") // 点击前删除之前的线，如果存在的话
    },
    // 加载ailabel
    getAilabel() {
      let that = this
      if (that.gMap) {
        that.gMap.destroy()
      }
      const gMap = new AILabel.Map("map", {
        center: { x: 350, y: 180 }, // 为了让图片居中
        zoom: 700,
        zoomMin: 10, // 最小缩小的尺寸
        mode: that.mode, // 绘制线段
        refreshDelayWhenZooming: false, // 缩放时是否允许刷新延时，性能更优
        zoomWhenDrawing: true,
        panWhenDrawing: true,
        zoomWheelRatio: 5, // 控制滑轮缩放缩率[0, 10), 值越小，则缩放越快，反之越慢
        withHotKeys: true, // 关闭快捷键
      })
      that.gMap = gMap
      that.setDrawingStyle(that.mode) // 给图列增加初始化
      that.addEvent() // 增加点击事件
      // 图片层添加
      const gFirstImageLayer = new AILabel.Layer.Image(
        "first-layer-image", // id
        {
          src: that.imgUrl,
          width: 700,
          height: 500,
          crossOrigin: false, // 如果跨域图片，需要设置为true
          position: {
            // 左上角相对中心点偏移量
            x: 0,
            y: 0,
          },
        }, // imageInfo
        { name: "第一个图片图层" }, // props
        { zIndex: 5 }, // style
      )
      // 添加到gMap对象
      // gFirstImageLayer.renew() // 刷新图片层
      gMap.addLayer(gFirstImageLayer)
      // 添加矢量图层
      const gFirstFeatureLayer = new AILabel.Layer.Feature(
        "first-layer-feature", // id
        { name: "第一个矢量图层" }, // props
        { zIndex: 10 }, // style
      )
      that.gFirstFeatureLayer = gFirstFeatureLayer
      gMap.addLayer(gFirstFeatureLayer)

      window.onresize = function () {
        that.gMap && that.gMap.resize()
      }
    },
    // 初始样式
    setDrawingStyle(mode) {
      let drawingStyle = {}
      switch (mode) {
        //平移
        case "PAN": {
          break
        }
        //注记
        case "MARKER": {
          // 忽略
          break
        }
        //点
        case "POINT": {
          this.drawingStyle = { fillStyle: "#1D82FE" }
          this.gMap.setDrawingStyle(drawingStyle)
          break
        }
        //圆
        case "CIRCLE": {
          this.drawingStyle = {
            fillStyle: "#87CEFF",
            strokeStyle: "#87CEFF",
            lineWidth: 3,
          }
          this.gMap.setDrawingStyle(drawingStyle)
          break
        }
        //线段
        case "LINE": {
          this.drawingStyle = {
            strokeStyle: "red",
            fillStyle: "red",
            lineCap: "round",
            lineWidth: 2,
          }
          this.gMap.setDrawingStyle(this.drawingStyle)
          break
        }
        //多线段
        case "POLYLINE": {
          this.drawingStyle = {
            strokeStyle: "red",
            lineJoin: "round",
            lineCap: "round",
            lineWidth: 2,
          }
          this.gMap.setDrawingStyle(drawingStyle)
          break
        }
        //矩形
        case "RECT": {
          this.drawingStyle = { strokeStyle: "#0f0", lineWidth: 1 }
          this.gMap.setDrawingStyle(this.drawingStyle)
          break
        }
        //多边形
        case "POLYGON": {
          this.drawingStyle = {
            strokeStyle: "#0099CC", //边框颜色
            fill: true, //是否填充
            fillStyle: "#FF6666", //填充色
            globalAlpha: 0.3,
            lineWidth: 3,
            stroke: true,
          }
          this.gMap.setDrawingStyle(this.drawingStyle)
          break
        }
        //涂抹
        case "DRAWMASK": {
          this.drawingStyle = {
            strokeStyle: "rgba(255, 0, 0, .5)",
            fillStyle: "#00f",
            lineWidth: 50,
          }
          this.gMap.setDrawingStyle(this.drawingStyle)
          break
        }
        //擦除
        case "CLEARMASK": {
          this.drawingStyle = { fillStyle: "#00f", lineWidth: 30 }
          this.gMap.setDrawingStyle(this.drawingStyle)
          break
        }
        default:
          break
      }
    },
    // 增加事件
    addEvent() {
      let that = this
      let gMap = this.gMap
      gMap.events.on("drawDone", (type, data) => {
        console.log("当前点击获取的数据------", type, data)
        if (type) {
          if (type == "POLYLINE") {
            this.$emit("getPolylines", data)
          }
          if (this.pointId == "startPoint" && type == "MARKER") {
            this.$emit("getStartPoint", data)
          }
          if (this.pointId == "endPoint" && type == "MARKER") {
            this.$emit("getEndPoint", data)
          }
          that.addFeature(data, type) // 添加图形
          this.gMapX = data.x
          this.gMapY = data.y
          return
        }
      })
      // gMap.events.on("boundsChanged", (data) => {
      //   console.log("--map boundsChanged--", data)
      //   return ""
      // })
      // // 双击编辑 在绘制模式下双击feature触发选中
      // gMap.events.on("featureSelected", (feature) => {
      //   this.editId = feature.id
      //   console.log("--map featureSelected--", feature, "双击编辑")
      //   //设置编辑feature
      //   gMap.setActiveFeature(feature)
      //   if (feature.type != "POINT") {
      //     // 增加删除按钮
      //     that.addDeleteIcon(feature, feature.shape)
      //   }
      // })
      // //右键 目前只针对点双击选中右键触发
      // gMap.events.on("featureDeleted", (feature) => {
      //   if (feature.type == "POINT") {
      //     // 根据id删除对应feature
      //     that.gFirstFeatureLayer.removeFeatureById(feature.id)
      //   }
      // })
      // // 单机空白取消编辑
      // gMap.events.on("featureUnselected", () => {
      //   // 取消featureSelected
      //   that.editId = ""
      //   that.deIcon()
      //   gMap.setActiveFeature(null)
      // })
      // // 更新完
      // gMap.events.on("featureUpdated", (feature, shape) => {
      //   console.log(feature)
      //   // 更新或者移动需要重新设置删除图标
      //   that.deIcon()
      //   feature.updateShape(shape)
      //   if (feature.type != "POINT") {
      //     that.addDeleteIcon(feature, shape)
      //   }
      // })
      // // 删除
      // gMap.events.on("FeatureDeleted", () => {
      //   // that.gFirstFeatureLayer.removeFeatureById(that.editId);
      // })
    },
    // 添加图形
    addFeature(data, type, id) {
      let that = this
      let drawingStyle = this.drawingStyle
      // 线
      if (type === "LINE") {
        const scale = that.gMap.getScale()
        const width = drawingStyle.lineWidth / scale
        const lineFeature = new AILabel.Feature.Line(
          id, // id
          { ...data, width }, // shape
          { name }, // props
          drawingStyle, // style
        )
        that.gFirstFeatureLayer.addFeature(lineFeature)
      }
      // 线段
      else if (type === "POLYLINE") {
        that.gFirstFeatureLayer.removeFeatureById("POLYLINE") // 点击前删除之前的多线段，如果存在的话
        const scale = that.gMap.getScale()
        const width = drawingStyle.lineWidth / scale
        const polylineFeature = new AILabel.Feature.Polyline(
          "POLYLINE", // id
          { points: data, width }, // shape
          { name },
          {
            strokeStyle: "red",
            fillStyle: "red",
            lineJoin: "round",
            lineCap: "round",
            lineWidth: 2,
            arrow: false,
          },
        )
        that.gFirstFeatureLayer.addFeature(polylineFeature)
      }
      // 矩形
      else if (type === "RECT") {
        const rectFeature = new AILabel.Feature.Rect(
          id, // id
          data, // shape
          { name }, // props
          drawingStyle, // style
        )
        that.gFirstFeatureLayer.addFeature(rectFeature)
      }
      // 多边形
      else if (type === "POLYGON") {
        const polygonFeature = new AILabel.Feature.Polygon(
          id, // id
          { points: data }, // shape
          { name }, // props
          drawingStyle, // style
        )
        that.gFirstFeatureLayer.addFeature(polygonFeature)
      }
      // 点
      else if (type == "POINT") {
        that.gFirstFeatureLayer.removeFeatureById(this.pointId) // 点击前删除之前的点，如果存在的话
        const gFirstFeaturePoint = new AILabel.Feature.Point(
          this.pointId, // id
          { ...data, r: 5 }, // shape
          { name: "POINT" }, // props
          this.drawingStyle,
          { fillStyle: "#FF8C00", zIndex: 5, lineWidth: 2 }, // style
        )
        that.gFirstFeatureLayer.addFeature(gFirstFeaturePoint)
      }
      //注记
      else if (type == "MARKER") {
        that.gFirstFeatureLayer.removeFeatureById(this.pointId) // 点击前删除之前的点，如果存在的话
        const gFirstMarker = new AILabel.Marker(
          this.pointId, // id
          {
            src: this.markerImgs,
            position: {
              // marker坐标位置
              x: data.x,
              y: data.y,
            },
            offset: {
              x: -16,
              y: 32,
            },
          }, // markerInfo
          { name: "第一个marker注记" }, // props
        )
        that.gFirstFeatureLayer.addFeature(gFirstMarker)
      }
      //圆
      else if (type == "CIRCLE") {
        const gFirstFeatureCircle = new AILabel.Feature.Circle(
          id, // id
          { cx: data.cx, cy: data.cy, r: data.r }, // shape
          { name: "第一个矢量图层" }, // props
          {
            fillStyle: "#87CEFF",
            strokeStyle: "#3CB371",
            globalAlpha: 1,
            lineWidth: 5,
          }, // style
        )
        that.gFirstFeatureLayer.addFeature(gFirstFeatureCircle)
      }
      //涂抹
      else if (type == "DRAWMASK") {
        const drawMaskAction = new AILabel.Mask.Draw(
          `${+new Date()}`, // id
          "铅笔",
          { points: data, width: 5 }, // shape
          { name: "港币", price: "1元" }, // props
          { strokeStyle: "#FF0000" }, // style
        )
        that.gFirstFeatureLayer.addAction(drawMaskAction)
      }
      //擦除
      else if (type == "CLEARMASK") {
        const clearMaskAction = new AILabel.Mask.Clear(
          "first-action-clear", // id
          { points: data, width: 5 }, // shape
        )
        that.gFirstMaskLayer.addAction(clearMaskAction)
      }
      this.getFeatures() // 获取所有点
    },
    // 获取所有features--数据
    getFeatures() {
      this.allFeatures = this.gFirstFeatureLayer.getAllFeatures()
      // console.log("面板上所有的数据", this.allFeatures)
    },
    // 撤销
    Revoke() {
      console.log("撤销")
      this.getFeatures()
      this.allFeatures.pop()
      this.gMap.refresh() // 刷新map
      console.log(this.allFeatures, "--所有操作--")
    },
    // 缩小
    zoomIn() {
      this.gMap.zoomIn()
    },
    // 放大
    zoomOut() {
      this.gMap.zoomOut()
    },
    // 路线展示
    initDrawLines() {
      let that = this
      that.gFirstFeatureLayer.removeFeatureById("POLYLINE") // 点击前删除之前的多线段，如果存在的话
      const scale = that.gMap.getScale()
      const width = this.drawingStyle.lineWidth / scale
      const polylineFeature = new AILabel.Feature.Polyline(
        "POLYLINE", // id
        { points: this.polylinesList, width },
        {
          strokeStyle: "red",
          fillStyle: "red",
          lineCap: "round",
          lineWidth: 21,
        },
      )
      that.gFirstFeatureLayer.addFeature(polylineFeature)
    },
    // 起点展示
    initDrawStartPoint() {
      let that = this
      that.gFirstFeatureLayer.removeFeatureById("startPoint") // 点击前删除之前的点，如果存在的话
      const gFirstMarker = new AILabel.Marker(
        "startPoint", // id
        {
          src: "https://fire-system.oss-cn-beijing.aliyuncs.com/web/airport/start.png",
          position: {
            // marker坐标位置
            x: this.startPointList[0].x,
            y: this.startPointList[0].y,
          },
          offset: {
            x: -16,
            y: 32,
          },
        }, // markerInfo
        { name: "第一个marker注记" }, // props
      )
      that.gFirstFeatureLayer.addFeature(gFirstMarker)
    },
    // 终点展示
    initDrawendPoint() {
      let that = this
      console.log("this.endPointList", this.endPointList)
      that.gFirstFeatureLayer.removeFeatureById("endPoint") // 点击前删除之前的点，如果存在的话
      const gFirstMarker = new AILabel.Marker(
        "endPoint", // id
        {
          src: "https://fire-system.oss-cn-beijing.aliyuncs.com/web/airport/endIcon.png",
          position: {
            // marker坐标位置
            x: this.endPointList[0].x,
            y: this.endPointList[0].y,
          },
          offset: {
            x: -16,
            y: 32,
          },
        }, // markerInfo
        { name: "第一个marker注记" }, // props
      )
      that.gFirstFeatureLayer.addFeature(gFirstMarker)
    },
    // 点位展示
    initDrawPoint() {
      if (this.gMapX > 0) {
        this.gFirstFeatureLayer.removeFeatureById("POINT1") // 点击前删除之前的点，如果存在的话
        const gFirstFeaturePoint = new AILabel.Feature.Point(
          "POINT1", // id
          { x: this.gMapX, y: this.gMapY, r: 7 }, // 模型位置
          { name: "第一个矢量图层" }, // props
          this.drawingStyle,
        )
        this.gFirstFeatureLayer.addFeature(gFirstFeaturePoint)
      }
    },
  },
  beforeDestroy() {
    console.log("销毁了")
    this.gMap.destroy()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
#map {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 98%;
  border: 1px dashed #ccc;
}
.zoom-boxs {
  padding: 20px !important;
  width: 80%;
  margin: 30px;
  height: 520px;
  background: #eee;
}
.map-boxs {
  width: 100%;
  height: 100%;
  padding: 0px 20px;
  margin-left: 20px;
}
.zoom-icon-wrapper {
  position: absolute;
  z-index: 1000;
}

.zoom-icon-plus {
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  border: 3px solid #6495ed;
  font-size: 20px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
}

.zoom-icon-plus:hover {
  border-color: #4169e1;
}

.zoom-icon-minus {
  margin-top: 6px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  border: 3px solid #6495ed;
  font-size: 25px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  color: #ff8c00;
  cursor: pointer;
  padding-right: 0px;
}

.zoom-icon-minus:hover {
  border-color: #4169e1;
}
.zoom-area {
  margin-top: 30px;
  text-align: right;
  font-size: 18px;
  span {
    display: inline-block;
    text-align: left;
    padding-left: 10px;
    width: 180px;
    height: 34px;
    line-height: 34px;
    // padding: 10px 30px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    vertical-align: middle;
    font-size: 13px;
  }
}
</style>
